<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title>HI</title>


    <link rel="stylesheet" type="text/css" href="./dap.css">
    <script src="./vue.js"></script>


</head>

<body>

    <h1>vue</h1>





    <div id="app">

            <div style="float:left;">
                <label>起飞：</label>
                <input type="input">
    
            </div>



            <div style="float:left;">
                <label>起飞：</label>


                <input type="input" v-model="datein" v-on:click.stop="isShow=!isShow" style="position:relative">

                <div v-bind:class="{ gone: !isShow }" style="position: absolute;width:600px;">
                    <y-date-picker style="float:left;" :date-show="dateLeft" :is-next-enale="false" v-on:picker-event="dealPicker"
                        v-on:prev-event="dealPrev" v-on:today-event="dealToday"></y-date-picker>
                    <y-date-picker style="float:left;" :date-show="dateRight" :is-prev-enable="false" :is-today-enale="false" 
                     v-on:picker-event="dealPicker" v-on:next-event="dealNext" v-on:today-event="dealToday"></y-date-picker>
                </div>

            </div>

            <div style="clear: both"></div>

    </div>

    <br>
    <div>
        <input id="nothing" type="text" value="测试用的">
    </div>


    <script src="./y-datepicker.js" type="text/javascript" charset="utf-8"> </script>    

    <script type="text/javascript"> 

        var changeFocus = function () {
            document.getElementById('nothing').focus();
        }
        changeFocus();


        var vm = new Vue({
            el: '#app',

            data: function () {
                return {
                    datein: "",
                    isShow: false,
                    datePicker: this.isOk(this.datein) ? new Date(this.datein) : new Date(),
                }
            },

            computed: {
                dateLeft() {
                    console.log(this.datePicker);

                    return this.datePicker;
                },
                dateRight() {
                    return this.nextMonth(this.datePicker);
                },
            },
            methods: {
                dealPicker(item) {
                    this.datein = item;    //需要this
                    this.datePicker = new Date(item);
                    this.isShow = false;
                },

                dealPrev() {
                    if (this.datePicker.getTime() < new Date().getTime()) {
                        return;
                    }

                    this.datePicker = this.prevMonth(this.datePicker);
                },

                dealNext() {
                    this.datePicker = this.nextMonth(this.datePicker);
                },

                dealToday() {
                    this.datePicker = new Date();
                },


                isOk(v) {
                    var reg = /^[1-2]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/g;
                    return reg.test(v);
                },

                prevMonth(dateIn) {
                    var date = new Date(dateIn);
                    var year = date.getFullYear();
                    var month = date.getMonth();

                    var newYear = month === 0 ? year - 1 : year;
                    var newMonth = month === 0 ? 11 : month - 1;

                    date.setMonth(newMonth);
                    date.setFullYear(newYear);
                    return date;
                },

                nextMonth(dateIn) {
                    var date = new Date(dateIn);
                    var year = date.getFullYear();
                    var month = date.getMonth();

                    var newYear = month === 11 ? year + 1 : year;
                    var newMonth = month === 11 ? 0 : month + 1;

                    date.setMonth(newMonth);
                    date.setFullYear(newYear);
                    return date;
                },
            },


        });

        document.onclick = function (e) {
            vm.isShow = false;
        }


    </script>    


</body>

</html>